<template>
  <!-- 我的-我的预约-跳转页面 -->
  <div class="appointment">
    <!-- 首页-头部导航栏 -->
    <van-nav-bar fixed title="我的预约" left-arrow @click-left="onClickLeft" />
    <van-tabs class="tabs" v-model="activeName">
      <!-- 待上课：选项卡开始，可用v-for循环，也可写死 -->
      <van-tab :title="`待上课 ${mm.length}`" name="a" v-if="3">
        <!-- to传参，跳转详情页面 -->
        <router-link to="" v-for="n in 5" :key="n">
          <!-- 选项卡整体：用v-for循环 -->
          <div class="tab">
            <!-- 左侧：图片+人数 -->
            <div class="tab-left">
              <img src="../assets/场馆图片测试.jpg" alt="" style="width: 60px; height: 60px" />
              <span>4/4</span>
            </div>
            <!-- 右侧：课程信息+按钮 -->
            <div class="tab-right">
              <!-- 右侧-左侧课程信息 -->
              <div class="tab-right-curriculum">
                <span class="cname">快速减脂教程训练</span>
                <span class="ctn">19:00 - 19:45&nbsp;&nbsp;教练名称</span>
                <span class="ctime">距离上课还剩20:20</span>
                <div class="ctarget">
                  <span>急速减脂</span>
                  <span>急速增肌，塑形</span>
                  <span>心肺考验</span>
                </div>
              </div>
              <!-- 右侧-右侧按钮 -->
              <div class="tab-right-button">
                <span class="cancel">取消</span>
                <span class="sign">签到or已签到</span>
              </div>
            </div>
          </div>
        </router-link>
      </van-tab>
      <!-- 选项卡结束 -->
      <van-tab :title="`已完成 ${mm.length}`" name="c">
        <!-- to传参，跳转详情页面 -->
        <router-link to="" v-for="n in 5" :key="n">
          <!-- 选项卡整体：用v-for循环 -->
          <div class="tab">
            <!-- 左侧：图片+人数 -->
            <div class="tab-left">
              <img src="../assets/场馆图片测试.jpg" alt="" style="width: 60px; height: 60px" />
              <span>4/4</span>
            </div>
            <!-- 右侧：课程信息+按钮 -->
            <div class="tab-right">
              <!-- 右侧-左侧课程信息 -->
              <div class="tab-right-curriculum">
                <span class="cname">快速减脂教程训练</span>
                <span class="ctn">19:00 - 19:45&nbsp;&nbsp;教练名称</span>
                <span class="ctime">恭喜您已完成当前训练</span>
                <div class="ctarget">
                  <span>急速减脂</span>
                  <span>急速增肌，塑形</span>
                  <span>心肺考验</span>
                </div>
              </div>
              <!-- 右侧-右侧按钮 -->
              <div class="tab-right-button">
                <span class="cancel">评价or已评价</span>
                <span class="checked">已签到</span>
              </div>
            </div>
          </div>
        </router-link>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  name: 'appointment',
  data() {
    return {
      activeName: 'a',
      mm: [1, 2, 3, 4, 5, 6]
    }
  },
  methods: {
    onClickLeft() {
      this.$router.push('/my')
    }
  }
}
</script>

<style>
.tabs{
  margin-top: 46px;
}
.tab {
  margin-top: 5px;
  padding: 10px 10px 5px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(240, 240, 240);
}
.tab-left {
  display: flex;
  flex-direction: column;
  margin-right: 10px;
}
.tab-left > img {
  margin-bottom: 7px;
  border-radius: 10px;
}
.tab-left > span {
  width: 100%;
  text-align: center;
}
.tab-right-curriculum {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  color: #666;
}
.tab-right-curriculum > .cname {
  font-size: 16px;
  font-weight: bold;
  color: #000;
}
.tab-right-curriculum > .cname,
.tab-right-curriculum > .ctn,
.tab-right-curriculum > .ctime {
  margin-bottom: 5px;
}
.tab-right-curriculum > .ctime {
  color: #f00;
}
.tab-right-curriculum > .ctarget {
  display: flex;
  flex-wrap: wrap;
}
.tab-right-curriculum > .ctarget > span {
  display: inline-block;
  border: 1px solid #ddd;
  padding: 2px 7px;
  margin-right: 10px;
  margin-bottom: 3px;
  border-radius: 10px;
}
.tab-right {
  display: flex;
  justify-content: space-between;
}
.tab-right-button {
  width: 70px;
  display: inline-block;
  text-align: right;
}
.tab-right-button > span {
  padding: 3px 7px;
  display: inline-block;
  text-align: right;
  margin-bottom: 5px;
  color: white;
  font-size: 12px;
  border-radius: 4px;
}
.tab-right-button > .cancel {
  background-color: #f00;
}
.tab-right-button > .sign,
.tab-right-button > .checked {
  background-color: #ffc000;
}
</style>
